<template>
  <div class="main_center column-flex">
    <div class="center-top">
      <OverviewPic />
    </div>
    <div class="box center-bottom">
      <h1 class="left-title sp-flex">
        <div>
          <span style="margin-right: 30px">资产分布</span>
          <el-select
            v-if="distribution == 'dept'"
            size="mini"
            v-model="type_sel"
            placeholder="请选择"
            clearable
            @change="changeType"
          >
            <el-option
              v-for="item in assetsArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <el-radio-group v-model="distribution" size="mini" @change="changeTab">
          <el-radio-button label="dept">单位部门</el-radio-button>
          <el-radio-button label="net">部署网络</el-radio-button>
        </el-radio-group>
      </h1>
      <div
        style="
          margin-top: -0.3rem;
          font-size: 0.625rem;
          text-align: left;
          color: #3b8afe;
        "
      >
        时间截止到{{ time }}
      </div>
      <AssetDistributionEcharts ref="asset_ref" />
    </div>
  </div>
</template>

<script>
import AssetDistributionEcharts from "@/components/echarts/assets/assetDistributionEcharts.vue";
import OverviewPic from "@/components/assets/overviewPic.vue";
import { cloneDeep } from "@/utils/loadash-es";
import { assetDistribution, assetDistributionNet } from "@/api/assetSituation";
import { parseTime } from "@/utils/hongke";
import Obj from "../components/tableData/index";
import moment from "moment";
export default {
  components: { AssetDistributionEcharts, OverviewPic },
  data() {
    return {
      // 资产部分
      type_sel: "",
      distribution: "dept",
      assetsArr: cloneDeep(Obj.assetsArr),
      time: parseTime(new Date().getTime()),
      timer: null,
    };
  },
  methods: {
    changeType(val) {
      assetDistribution(val).then((res) => {
        this.$refs.asset_ref.initChart(res);
      });
    },
    // 切换页面
    changeTab(val) {
      if (val == "dept") {
        assetDistribution(this.type_sel).then((res) => {
          this.$refs.asset_ref.initChart(res);
        });
      } else {
        assetDistributionNet().then((res) => {
          this.$refs.asset_ref.initChart(res);
        });
      }
    },
    // 循环资产分布标签
    assetsLoop() {
      this.timer = setInterval(() => {
        this.distribution = this.distribution == "dept" ? "net" : "dept";
        this.changeTab(this.distribution);
      }, 20000);
    },
  },
  mounted() {
    this.changeType("");
    this.assetsLoop();
  },
  destroyed () {
    clearInterval(this.timer);
    this.timer = null;
  },
};
</script>

<style lang="scss" scoped>
.center-top {
  height: 75%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.center-bottom {
  height: 25%;
}
::v-deep .el-radio-button {
  margin-right: 10px;
}
</style>
